<template>
  <div class="List" ref="wrapper">
    <div>
          <div class="area">
                    <div class="title border-topbottom">当前城市</div>
                    <div class="button-list">
                      <div class="button-wrapper">
                        <div class="button">{{this.$store.state.city}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="area">
                        <div class="title border-topbottom">热门城市</div>
                        <div class="button-list">
                      <div class="button-wrapper" v-for="item of hot" :key="item.id"
                      @click="handcity(item.name)"
                      >
                        <div class="button">{{item.name}}</div>
                      </div>

                    </div>
                  </div>
                  <div class="area" v-for="(item,key) of city" :key="key" :ref="key">
                    <div class="title border-topbottom ">{{key}}</div>
                    <div class="item-list">
    <div class="item border-bottom" v-for="inneritem of item" :key="inneritem.id"
    @click="handcity(inneritem.name)">
                       {{inneritem.name}}
                      </div>
                    </div>
                  </div>
    </div>

  </div>

</template>

<script>
import Bscroll from 'better-scroll'
export default {
    mounted(){
      this.scroll = new Bscroll(this.$refs.wrapper)
    },
    props:{
      letter:String,
      city:Object,
      hot:Array
    },
    watch:{
        letter (){
            if(this.letter){
              this.scroll.scrollToElement(this.$refs[this.letter][0]);
            }
        }
    },
    methods:{
          handcity(city){
             this.$store.dispatch('changeCity',city);
              this.$router.push('/')
              }
    }

}
</script>

<style scoped>
.title{
    line-height: .54rem;
    background: #eee;
    padding-left: .2rem;
    color:#666;
    font-size:.26rem
}
.border-topbottom{
  border-color:#ccc
}
.button-list{
  padding: .1rem .6rem .1rem .1rem;
  overflow: hidden;
}
.button{
 text-align: center;
 margin: .1rem;
 border: .02rem solid #ccc;
 padding: .1rem 0;
 border-radius: .06rem
}
.button-wrapper{
  float:left;
  width:33.33%;
}
.item{
  line-height: .76rem;
  padding-left: .2rem

}
.List{
    position: absolute;
    top:1.58rem;
    left: 0;
    right: 0;
    overflow: hidden;
    bottom: 0;
}
border-bottom{
  color: #ccc
}
</style>
